<template>
  <div class="guide-data">
    <div class="center-header">
      <div class="box box1">
        <div class="pool-data">
          <div class="data-left">
            <span class="key">累计授信金额（万）</span>
            <span class="val">
              <run-number
                :selfWidthStyle="'width: 0.7em'"
                :number="Math.ceil(data.credit_venture_quota / 1000000)"
                :selfTransitionStyle="'transform 1.5s ease-in-out'"
              ></run-number>
            </span>
          </div>
          <div class="data-right">
            <span class="key">累计授信人数</span>
            <span class="val">{{
              data.credit_venture_pass_uv | amountFormat(0, '.', ',', false)
            }}</span>
            <span class="key">累计授信人次</span>
            <span class="val">{{
              data.credit_venture_pass_pv | amountFormat(0, '.', ',', false)
            }}</span>
          </div>
        </div>
        <div class="pool-data">
          <div class="data-left">
            <span class="key">累计放款金额（万）</span>
            <span class="val">
              <run-number
                :selfWidthStyle="'width: 0.7em'"
                :number="Math.ceil(data.loan_success_amount / 1000000)"
                :selfTransitionStyle="'transform 1.5s ease-in-out'"
              ></run-number>
            </span>
          </div>
          <div class="data-right">
            <span class="key">累计放款人数</span>
            <span class="val">{{
              data.loan_success_uv | amountFormat(0, '.', ',', false)
            }}</span>
            <span class="key">累计放款人次</span>
            <span class="val">{{
              data.loan_success_pv | amountFormat(0, '.', ',', false)
            }}</span>
          </div>
        </div>
      </div>
      <div class="box box2">
        <div class="pool-data">
          <div class="data-left">
            <span class="key">在贷余额（万）</span>
            <span class="val">
              <run-number
                :selfWidthStyle="'width: 0.7em'"
                :number="
                  Math.ceil(
                    (data.loan_success_amount - data.paid_principal < 0
                      ? 0
                      : data.loan_success_amount - data.paid_principal) /
                      1000000
                  )
                "
                :selfTransitionStyle="'transform 1.5s ease-in-out'"
              ></run-number>
            </span>
          </div>
          <div class="data-right">
            <span class="key">累计注册人数</span>
            <span class="val">{{
              data.signup_uv | amountFormat(0, '.', ',', false)
            }}</span>
          </div>
        </div>
        <div class="pool-data">
          <div class="data-left">
            <span class="key">在贷人数</span>
            <span class="val">
              {{ data.loan_repay_uv | amountFormat(0, '.', ',', false) }}</span
            >
          </div>
          <div class="data-right">
            <span class="key">当月注册人数</span>
            <span class="val">{{
              data.month_signup_uv | amountFormat(0, '.', ',', false)
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import runNumber from '@/components/runNumber/index.vue'
@Component({
  name: 'guide-data',
  components: {
    runNumber
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({
    default: {
      signup_uv: 0, // 累计注册人数
      credit_venture_quota: 0, // 累计授信金额
      credit_venture_pass_pv: 0, // 累计授信人次
      credit_venture_pass_uv: 0, // 累计授信人数
      loan_success_amount: 0, // 累计放款金额
      loan_success_pv: 0, // 累计放款人次
      loan_success_uv: 0, // 累计放款人数
      paid_principal: 0, // 累计已还本金
      loan_repay_uv: 0, // 在贷人数
      month_signup_uv: 0 // 当月注册人数
    }
  })
  private data!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
  }
  private methodExp() {
    // method创建地方
  }
}
</script>

<style lang="scss" scoped>
.guide-data {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.6em;
  width: 100%;
  z-index: 2000;
  .center-header {
    margin-top: 1.5em;
    position: relative;
    transform-style: preserve-3d;
    animation: dashboardGuideData 60s ease-in-out infinite alternate;
    .box {
      display: flex;
      justify-content: center;
      .pool-data {
        display: flex;
        justify-content: space-between;
        height: 1em;
        &:first-child {
          margin-right: 1.1em;
        }
        .data-left {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .key {
            font-size: 0.2em;
            font-weight: 400;
            color: #ffffff;
          }
          .val {
            font-size: 0.7em;
            color: #daf8ff;
            font-family: DFPZongYiW7-GB;
            font-weight: 800;
            text-shadow: 0px 0px 0.01em #daf8ff, 0px 0px 0.1em #008cff,
              0px 0px 0.2em #008cff;
            line-height: 1em;
            margin-top: 0.2em;
          }
        }
        .data-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-left: 0.2em;
          .key {
            font-size: 0.16em;
            font-weight: 400;
            color: #ffffff;
          }
          .val {
            font-size: 0.24em;
            font-weight: 600;
            color: #ff9800;
          }
        }
      }
    }
    .box1 {
      transform: rotateX(0deg) translateZ(0.5em);
    }
    .box2 {
      transform: rotateX(-90deg) translateZ(0.8em);
      margin-top: -1em;
    }
    &:hover {
      transform: rotateX(90deg) rotateZ(0deg);
    }
  }
}
</style>
